<template>
	<view class="userInfo">
		<u-navbar title="个人中心" @leftClick="leftClick" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="avatarBox" @click="handleUpload">
			<image v-if="avatar" :src="avatar" style="width: 100%;height: 100%;border-radius: 100rpx;" mode=""></image>
			<image :src="imaurl+'a6.png'" style="width: 48rpx;height: 48rpx;position: absolute;bottom: 0; right: 0;"
				mode=""></image>
		</view>

		<view class="messageBox">

			<view class="messageItem">
				<view class="lable">
					昵称
				</view>
				<input class="inputitem" v-model="nickname" type="text" placeholder="请输入" />
			</view>

			<view class="messageItem">
				<view class="lable">
					姓名
				</view>
				<input class="inputitem" v-model="realname" type="text" placeholder="请输入" />
			</view>

			<view class="messageItem">
				<view class="lable">
					联系方式
				</view>
				<input class="inputitem" v-model="contact_information" type="text" placeholder="请输入" />
			</view>

			<view class="messageItem">
				<view class="lable">
					<text class="">
						地址
					</text>
					<text class="position" style="margin-left: 450rpx;" @click="handleSelectposition">
						定位选择
					</text>
				</view>
				<textarea class="textatreitem" v-model="address" cols="30" rows="10" placeholder="请输入"></textarea>
			</view>

		</view>

		<view class="loginBox" @click="handleHome">
			保存
		</view>

	</view>
</template>

<script>
	import {
		profile,
		uploadImg,
		MyIndex
	} from "@/api/api.js"
	export default {
		data() {
			return {
				avatar: "", //头像
				nickname: "", //昵称
				realname: "", //姓名
				address: "", //地址
				contact_information: "", //联系方式
				jumpflag: false,
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
			}
		},
		onLoad(options) {
			this.jumpflag = options.flag
			this.handleMyIndex()
		},
		methods: {
			async handleMyIndex() {
				let res = await MyIndex()
				this.avatar = res.data.avatar
				this.nickname = res.data.nickname
				this.realname = res.data.realname
				this.address = res.data.address
				this.contact_information = res.data.contact_information

			},
			handleUpload() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: uploadImg, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									console.log("uploadFileRes", JSON.parse(uploadFileRes.data)
										.data.url)
									that.avatar = JSON.parse(uploadFileRes.data).data.url
								},
								fail(e) {
									// console.log("上传图片", e)
								}
							});
						}
					}
				});
			},
			handleSelectposition() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log("res", res)
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.address = res.address + '' + res.name
						// console.log("3333", that.address)
					}
				});
			},
			async handleHome() {
				let data = {
					nickname: this.nickname,
					realname: this.realname,
					avatar: this.avatar,
					contact_information: this.contact_information,
					address: this.address
				}
				// console.log("data", data)
				let res = await profile(data)
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
					if (!this.jumpflag) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/client/home/index"
							})
						}, 2000)
					}

				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					});
				}

			},

		}
	}
</script>

<style scoped lang="scss">
	.userInfo {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		padding-top: 30rpx;
		box-sizing: border-box;

		.avatarBox {
			width: 160rpx;
			height: 160rpx;
			background: #F6F6F6;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			margin: 0 auto;
			position: relative;
		}

		.messageBox {
			width: 670rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.messageItem {
				margin-bottom: 30rpx;

				.lable {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					line-height: 38rpx;
					margin: 30rpx 20rpx;

					.position {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #00BF52;
						line-height: 33rpx;
						text-align: right;

					}
				}

				.inputitem {
					width: 670rpx;
					height: 104rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 33rpx;
					text-align: left;
					box-sizing: border-box;
					padding-left: 30rpx;
				}

				.textatreitem {
					width: 670rpx;
					height: 200rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 33rpx;
					padding: 30rpx;
					box-sizing: border-box;
				}
			}
		}

		.loginBox {
			width: 630rpx;
			height: 88rpx;
			background: #00BF52;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>